<template>
  <div>
    <p>
      State: <label id="label_state">{{ stateLabel }}</label>
    </p>
    <br />
    <div
      style="
        width: 500px;
        height: 250px;
        border: solid 1px #1b65ee;
        background-color: chocolate;
      "
    >
      <img id="img_sign_result" :src="signImage" alt="Signature Result" />
    </div>
    <br />
    <input type="button" value="beginSign" @click="beginSign" />
    <input type="button" value="saveSignToBase64" @click="saveSignToBase64" />
    <input type="button" value="endSign" @click="endSign" />
    <input type="button" value="moveSignWindow" @click="moveSignWindow" />
    <input type="button" value="getDeviceSN" @click="getDeviceSN" />
    <label id="img_base64_data">{{ deviceSN }}</label>
    <br />
    <br />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { PluginNSV } from "../utils/js-NSV";

const emit = defineEmits(["Return"]); // 定义自定义事件

const plugin = ref(null);
const stateLabel = ref("");
const signImage = ref("");
const deviceSN = ref("");

const debugPrint = (text) => {
  console.log(`DebugPrint[${text}]`);
};

const initPlugin = () => {
  if (plugin.value) {
    plugin.value.DestroyPlugin();
  }
  plugin.value = new PluginNSV();
  plugin.value.InitPlugin((state) => {
    if (state === 1) {
      plugin.value.setPenSizeRange(1, 5, null);
      plugin.value.setPenColor(0, 0, 0, null);
      stateLabel.value = "connect service succeeded.";
      debugPrint("initialize plugin OK.");
    } else {
      stateLabel.value = "connect failed.";
      debugPrint("initialize plugin fails.");
    }
  });

  plugin.value.onConfirm = () => {
    saveSignToBase64();
    endSign();
    plugin.value.mouseControl(false, null);
  };

  plugin.value.onClear = clearSign;
  plugin.value.onCancel = endSign;
  plugin.value.NoSigned = noSign;
};

const noSign = () => {
  if (plugin.value) {
    plugin.value.NoSign((state, args) => {
      if (state) {
        debugPrint("NoSign OK");
      } else {
        debugPrint(`NoSign error, description: ${args[0]}`);
      }
    });
  }
};

const clearSign = () => {
  if (plugin.value) {
    plugin.value.clearSign((state, args) => {
      if (!state) {
        debugPrint(`clearSign error, description: ${args[0]}`);
      }
    });
  }
  signImage.value = "";
};

const beginSign = () => {
  if (plugin.value) {
    plugin.value.beginSign((state, args) => {
      if (state) {
        debugPrint("beginSign OK");
        plugin.value.mouseControl(false, null);
        plugin.value.setDisplayMapMode(1, (state, args) => {});
      } else {
        debugPrint(`beginSign error, description: ${args[0]}`);
      }
    });
  }
  signImage.value = "";
};

const endSign = () => {
  if (plugin.value) {
    plugin.value.endSign((state, args) => {
      if (state) {
        debugPrint("endSign OK");
      } else {
        debugPrint(`endSign error, description: ${args[0]}`);
      }
    });
  }
};

const moveSignWindow = () => {
  if (plugin.value) {
    plugin.value.moveSignWindow(250, 0, 500, 600, (state, args) => {
      if (state) {
        debugPrint("moveSignWindow OK");
      } else {
        debugPrint(`moveSignWindow error, description: ${args[0]}`);
      }
    });
  }
};

const getDeviceSN = () => {
  if (plugin.value) {
    plugin.value.GetDeviceSN((state, args) => {
      if (state) {
        deviceSN.value = args[0];
        stateLabel.value = `${deviceSN.value} connect service succeeded.`;
        debugPrint(`GetDeviceSN OK: ${deviceSN.value}`);
      } else {
        debugPrint(`GetDeviceSN error, description: ${args[0]}`);
      }
    });
  }
};

const saveSignToBase64 = () => {
  if (plugin.value) {
    plugin.value.saveSignToBase64(0, 0, (state, args) => {
      if (state) {
        const imgBase64Data = args[0];
        signImage.value = `data:image/png;base64,${imgBase64Data}`;
        console.log('写字板',signImage.value);

        emit('Return', signImage.value); // 使用 emit 触发 'return' 事件并传递数据
        debugPrint("saveSignToBase64 OK");
      } else {
        debugPrint(`saveSignToBase64 error, description: ${args[0]}`);
      }
    });
  }
};

onMounted(initPlugin);

onUnmounted(() => {
  if (plugin.value) {
    plugin.value.DestroyPlugin();
  }
});

// 暴露方法给父组件
defineExpose({ beginSign });
</script>

<style scoped>
div {
  padding: 20px;
}
</style>